<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	{{--<link rel="stylesheet" href="{{url('/common/css/commonality.css')}}">--}}
	{{--<link rel="stylesheet" href="{{asset('css/app.css')}}">--}}
	{{--<link rel="stylesheet" href="{{url('/common/js/zui-1.8.1/dist/lib/uploader/zui.uploader.min.css')}}">--}}
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">
	<link rel="stylesheet" href="{{asset('/css/mobile/common_web.css')}}">
	<link rel="stylesheet" href="{{asset('/css/mobile/registration.css')}}">
</head>
<body>
	<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
	<div class="page-group">
		<!-- 单个page ,第一个.page默认被展示-->
		<div class="page">
			<!-- 工具栏 -->
			<nav class="bar bar-tab" style="background:#fff;">
				<a class="tab-item external" href="{{url('/admin/home')}}">
					<i class="icon iconfont">&#xe649;</i>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external active" href="{{url('/admin/person')}}">
					<i class="icon iconfont">&#xe648;</i>
					<span class="tab-label">个人设置</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<div class="content-block">
					<!--这里是content-->
					<div class="log_box">
						<div class="img_box">
							<img src="" alt="">
						</div>
						<p>三咖一站式全球数字极速注册</p>
					</div>
					<form id="form" method="post" class="list-block" enctype="multipart/form-data">
						{{csrf_field()}}
						<ul>
							<!-- Text inputs -->
							<li>
								<div class="item-content">
									<div class="item-inner Flex">
										<div class="item-title label">真实姓名：</div>
										<div class="item-input">
											<input type="text" name="real_name" placeholder="请输入真实姓名" maxlength="12" required minlength="2">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">艺名：</div>
										<div class="item-input">
											<input type="text" name="stage_name" placeholder="请输入艺名" maxlength="12" minlength="2">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">主要专业：</div>
										<div class="item-input">
											<select name="major" id="major" required>
												<option value="1">原创歌手</option>
												<option value="2">歌手</option>
												<option value="3">乐手</option>
												<option value="4">词作者</option>
												<option value="5">曲作者</option>
											</select>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">手机号：</div>
										<div class="item-input">
											<input type="text" name="phone" id="phone" placeholder="请输入艺人手机号" required>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">验证码：</div>
										<div class="item-input">
											<input type="text" name="code" placeholder="请输入验证码" required>
										</div>
										<div class="content-block"  style="padding-right:0;">
											<p><button type="button" onclick="aliSmsCode()" class="button button-big com_btn" style="">获取验证码 </button></p>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">身份证：</div>
										<div class="item-input">
											<input type="text" name="card" placeholder="请输入身份证号" required>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">签约方式：</div>
										<div class="item-input">
											<select class="form-control" name="sign_type" required>
												<option value="">--请选择--</option>
												<option value="1">全球独家</option>
												<option value="2">中国大陆独家</option>
												<option value="3">中国地区独家</option>
												<option value="4">外海（含港澳台）独家</option>
												<option value="5">海外（不含港澳台）独家</option>
												<option value="6">欧洲独家</option>
												<option value="7">亚洲独家</option>
												<option value="8">美洲独家</option>
												<option value="9">非洲独家</option>
											</select>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">签约期限：</div>
										<div class="item-input">
											<select name="sign_time" class="form-control" required>
												<option value="">--请选择--</option>
												<option value="3">3年自动续约</option>
												<option value="2">2年自动续约</option>
												<option value="1">1年自动续约</option>
												<option value="4">自由艺人</option>
											</select>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">国家/地区：</div>
										<div class="item-input">
											<select class="form-control" name="country" id="country" required>
												<option value="中国大陆">中国大陆</option>
												<option value="中国澳门">中国澳门</option>
												<option value="中国香港">中国香港</option>
												<option value="中国台湾">中国台湾</option>
												<option value="海外地区">海外地区</option>
											</select>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">省/市：</div>
										<div class="item-input">
											<select class="form-control" name="provice" id="provice" required>
												<option value="北京市">北京市 </option>
												<option value="天津市">天津市 </option>
												<option value="上海市">上海市 </option>
												<option value="重庆市">重庆市 </option>
												<option value="河北省">河北省 </option>
												<option value="山西省">山西省 </option>
												<option value="辽宁省">辽宁省 </option>
												<option value="吉林省">吉林省 </option>
												<option value="黑龙江省">黑龙江省</option>
												<option value="江苏省">江苏省 </option>
												<option value="浙江省">浙江省 </option>
												<option value="安徽省">安徽省 </option>
												<option value="福建省">福建省 </option>
												<option value="江西省">江西省 </option>
												<option value="山东省">山东省 </option>
												<option value="河南省">河南省 </option>
												<option value="湖北省">湖北省 </option>
												<option value="湖南省">湖南省 </option>
												<option value="广东省">广东省 </option>
												<option value="海南省">海南省 </option>
												<option value="四川省">四川省 </option>
												<option value="贵州省">贵州省 </option>
												<option value="云南省">云南省 </option>
												<option value="陕西省">陕西省 </option>
												<option value="甘肃省">甘肃省 </option>
												<option value="青海省">青海省 </option>
												<option value="广西壮族自治区">广西壮族自治区</option>
												<option value="内蒙古自治区">内蒙古自治区</option>
												<option value="西藏自治区">西藏自治区</option>
												<option value="宁夏回族自治区">宁夏回族自治区 </option>
												<option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
											</select>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">用户协议：</div>
										<div class="item-input">
											<style>
												.file {
													position: relative;
													display: inline-block;
													background: red;
													border-radius: 4px;
													padding: 4px 12px;
													overflow: hidden;
													color: white;
													text-decoration: none;
													text-indent: 0;
													line-height: 20px;
												}
												.file input {
													position: absolute;
													font-size: 100px;
													right: 0;
													top: 0;
													opacity: 0;
												}
												/*.file:hover {*/
													/*background: #AADFFD;*/
													/*border-color: #78C3F3;*/
													/*color: #004974;*/
													/*text-decoration: none;*/
												/*}*/
											</style>
											<p href="javascript:;" class="file">选择文件
												<input type="file" name="agreement" required><span class="showFileName"></span>
											</p>
											{{--<input type="file" name="agreement" style="width:100%; color:#ccc;background-color: #CF2121">--}}
											{{--<input type="file" class="upload_file" name="agreement" onchange="doChange(this)" style="display:none;"/>--}}
											{{--<input class="photoCover" type="text"  placeholder="用户协议" required>--}}
										</div>
										{{--<div class="content-block" style="padding-right:0;">--}}
											{{--<button type="button" class="button button-big mybutton com_btn" style="width:4rem;cursor:pointer;" onclick="$('.upload_file').click();">浏览</button>--}}
										{{--</div>--}}
										{{--zui上传--}}
										{{--<div id="uploaderExample" class="item-input uploader displayFlex flex-center">--}}
											{{--<div class="file-list" data-drag-placeholder="请拖拽文件到此处" style="width:86.5%;"></div>--}}
											{{--<button type="button" class="btn btn-primary uploader-btn-browse" style=""> 选择文件</button>--}}
										{{--</div>--}}
									</div>
								</div>
							</li>
							<li>
								<p style="text-align: center;line-height:2.5rem;font-size:0.8rem;" >
									<input type="checkbox" required style="margin-right:0.5rem;"><span class="open-slider-modal">我已阅读并同意《三咖音乐用户使用规定》</span>
								</p>
							</li>
						</ul>
						<div class="content-block registration">
							<div class="row">
								<p style="padding:1rem;"><input type="submit" style="color:#fff;" class="open-tabs-modal button button-big button-round" value="极速注册"></p>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

</body>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js' charset='utf-8'></script>
<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
{{--<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.8.1/lib/jquery/jquery.js"></script>--}}
{{--<script src="{{url('/common/js/zui-1.8.1/dist/js/zui.min.js')}}"></script>--}}
{{--<script src="{{url('common/js/zui-1.8.1/dist/lib/uploader/zui.uploader.min.js')}}"></script>--}}
<script>
	if ('{{$status}}' == 1) {
        $.modal({
            text: '<div class="tabs">'+
                '<div class="tab active" id="tab1"><h1 style="">注册成功</h1><p>真实姓名：<span>{{$real_name}}</span></p>\n' +
                '\t\t\t<p>艺名：<span>{{$stage_name}}</span></p>\n' +
                '\t\t\t<p>手机号：<span>{{$phone}}</span></p>\n' +
                '\t\t\t<p style="text-indent:2em">注册已成功，账号密码将会发送到艺人的手机上，请通知艺人查收并妥善保管，以避免不必要的损失。</p></div>'+
                '</div>',
            buttons: [
                {
                    text: '<form action="/admin/home/" method="get"><button type="submit" style="width:95%;color:#fff;"class="open-tabs-modal button button-big button-round" value="">确定</button></form>',
                    bold: true
                },
            ]
        })
	}

    // 规定
    $(document).on('click','.open-slider-modal', function () {
        var modal = $.modal({
            title: '<h4>三咖音乐用户使用规则</h4>',
            // text: 'What do you think about my photos?',
            afterText:
                '<div>'+
                '\n' +
                '\t\t三咖音乐用户使用规则\n' +
                '\n' +
                '\n' +
                '\t\t三咖用户使用规则中，其中音乐用户使用是应该注重的所有什么......\n' +
                '\n' +
                '\t\t北京三咖文化有限公司可以提供音乐上传，音乐管理等，......\n' +
                '\n' +
                '\t\t您在使用三咖时应该遵守的义务是什么\n' +
                '\n' +
                '\t\t1.条件是\n' +
                '\n' +
                '\t\t2.条件是\n' +
                '\n' +
                '\t\t三咖用户使用规则中，其中音乐用户使用是应该注重的所有什么......\n' +
                '\n' +
                '\t\t北京三咖文化有限公司可以提供音乐上传，音乐管理等，......\n' +
                '\n' +
                '\t\t您在使用三咖时应该遵守的义务是什么\n' +
                '\n' +
                '\t\t1.条件是\n' +
                '\n' +
                '\t\t2.条件是\n' +
                '\n' +
                '\t\t三咖用户使用规则中，其中音乐用户使用是应该注重的所有什么......\n' +
                '\n' +
                '\t\t北京三咖文化有限公司可以提供音乐上传，音乐管理等，......\n' +
                '\n' +
                '\t\t您在使用三咖时应该遵守的义务是什么\n' +
                '\n' +
                '\t\t1.条件是\n' +
                '\n' +
                '\t\t2.条件是\n' +
                '\n' +
                '\t\t三咖用户使用规则中，其中音乐用户使用是应该注重的所有什么......\n' +
                '\n' +
                '\t\t北京三咖文化有限公司可以提供音乐上传，音乐管理等，......\n' +
                '\n' +
                '\t\t您在使用三咖时应该遵守的义务是什么\n' +
                '\n' +
                '\t\t1.条件是\n' +
                '\n' +
                '\t\t2.条件是\n' +
                '</div>',
            buttons: [
                {
                    text: '不同意'
                },
                {
                    text: '同意',
                    bold: true,
                    onClick: function () {
                        $.alert('您已阅读并同意三咖音乐用户使用规则')
                    }
                },
            ]
        })
        $.swiper($(modal).find('.swiper-container'), {pagination: '.swiper-pagination'});
    })

    function aliSmsCode(){
        var phone = $('#phone').val();
        $.post('{{url('admin/aliSmsCode')}}',{'phone': phone,},function(){

        });
    }

    // 上传功能
    // function doChange(file){
    //     var upload_file = $.trim($(".upload_file").val());    //获取上传文件
    //     $('.photoCover').val(upload_file);     //赋值给自定义input框
    // }
    $(".file").on("change","input[type='file']",function(){
        var filePath=$(this).val();
        $(".showFileName").html(filePath);
    })
</script>
</html>
